<template>
  <el-dialog
      v-model="ledgerDetailWinDialogVisible"
      title="查看设备信息"
      width="50%"
  >
    <template #default>
      <el-descriptions >
        <el-descriptions-item label="设备编码">{{ledger.machineCode}}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ledger.machineName}}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag type="primary" v-if="ledger.machineStatus == 1">启用</el-tag>
          <el-tag type="warning" v-else="ledger.machineStatus == 2">禁用</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备品牌">
          {{ledger.machineBrand}}
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">
          {{ledger.machineSpec}}
        </el-descriptions-item>
        <el-descriptions-item label="所属车间">
          {{ledger.workShopId}}
        </el-descriptions-item>
        <el-descriptions-item label="备注" aria-colcount="3">
          <div v-html="ledger.machineNotes"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <el-button @click="ledgerDetailWinDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import ledgerRequest from "@/api/ledger.js";
// 申明组件的属性
const props = defineProps(['machineCode']);
// 弹窗标记
let ledgerDetailWinDialogVisible = ref(false);
// 详情对象
let ledger = ref({})
// 通过id加载
function loadLedger(){
  ledgerRequest.selectByCode(props.machineCode,res=>{
    if(res.data){
      ledger.value = res.data;
      ledgerDetailWinDialogVisible.value = true;
    }
  });
}
// 属性侦听
watch(()=>props.machineCode,()=>{
  if(props.machineCode){
    loadLedger();
  }
});

</script>
<style scoped>

</style>